(function Carousel() {
	document.write("<div id='carousel' ><div id='left'><span class='circle'><b><</b></span></div><div id='leftBG'></div><div id='right'><span class='circle'><b>></b></span></div><div id='rightBG'></div><img id='img' src='img/0.jpg' align='center' width='1000px' height='600px'/><div id='navigate'></div></div>");
	for(var t = 1; t < 11; t++) {
		document.getElementById("navigate").innerHTML += "<span id='" + t + "' class='dot'><b>" + t + "</b></span>";
	}
	var i = 1,
		carousel = document.getElementById("carousel"),
		car, dot = document.getElementsByClassName("dot"),
		dotstyle,
		changimg = function() {
			document.getElementById("img").src = "img/" + i + ".jpg";
		},
		judgeAndChange = function() {
			i++;
			if(i > 10)
				i = 0;
			changimg();
		};
	function start() {
		car = setInterval(function() {
			judgeAndChange();
		}, 2000)
	}
	start();
	carousel.onmouseover = function() {
		clearInterval(car);
	}
	carousel.onmouseout = function() {
		start();
	}
	document.getElementById("leftBG").onclick = function() {
		i--;
		if(i < 0)
			i = 10;
		changimg();
	}
	document.getElementById("rightBG").onclick = function() {
		judgeAndChange();
	}
	for(var d in dot) {
		dot[d].onmouseover = function() {
			dotstyle = this.style;
			i = this.id;
			changimg();
			this.style.background = "red";
			this.style.opacity = "1";
		}
		dot[d].onmouseout = function() {
			this.style = dotstyle;
		}
	}
})()
